<template>
  <div class="nav">
    <!-- logo -->
    <div class="logo">
      <a href="/home">
        <img src="../../../assets/img/common/logo.png" alt="logo">
      </a>
    </div>
    <!-- 内容 -->
    <div class="nav-box">
      <!-- 每一项 -->
      <div
        class="nav-item-box"
        v-for="(item, index) in navItem"
        :key="item.name"
        :class="{
          active: index === currentIndex,
          product: index == 1,
          solution: index == 2
        }"
        @click="itemClick(index, item.link)"
        @mouseover="itemOver(index)"
        @mouseleave="itemLeave(index)"
      >
        <!-- 文字 -->
        <div
          class="nav-text"
          
        >
          <span>{{ item.name }}</span>
        </div>
        <!-- 悬浮盒子 -->
        <div class="nav-hover-box">
          <h2>{{ item.name }}</h2>
          <!-- 文字盒子 -->
          <div class="nav-hover-text-box">
            <!-- 每一项 -->
            <div
              class="nav-hover-item"
              v-for="hoverItems in item.items"
              :key="hoverItems.name"
            >
              <a @click="btnClick(hoverItems.goto)">{{ hoverItems.name }}</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Nav",
  data() {
    return {
      // 默认第一个被选中
      currentIndex: 0,
      navItem: [
        {
          name: "首页",
          link: "/home"
        },
        {
          name: "产品中心",
          link: "/product",
          items: [
            {
              name: "智慧党建平台",
              goto: "/cpzx/zhdj?link=cpzx"
            },
            {
              name: "综治网格化平台",
              goto: "/cpzx/zzwg?link=cpzx"
            },
            {
              name: "智慧街道政务平台",
              goto: "/cpzx/zhjd?link=cpzx"
            },
            {
              name: "物业政务监管平台",
              goto: "/cpzx/wyzw?link=cpzx"
            },
            {
              name: "智慧物业大脑平台",
              goto: "/cpzx/wydn?link=cpzx"
            },
            {
              name: "智慧园区大脑平台",
              goto: "/cpzx/yqdn?link=cpzx"
            },
            {
              name: "美丽数字乡村平台",
              goto: "/cpzx/szxc?link=cpzx"
            },
            {
              name: "志愿者服务平台",
              goto: "/cpzx/zyz?link=cpzx"
            },
          ]
        },
        {
          name: "解决方案",
          link: "/solution",
          items: [
            {
              name: "公安主导型安防社区平台建设方案",
              goto: "/fazx/gazd?link=fazx&name=gazd"
            },
            {
              name: "住建主导型城市级智慧物业建设方案",
              goto: "/fazx/zjzd?link=fazx&name=zjzd"
            },
            {
              name: "街道主导型智慧社区平台建设方案",
              goto: "/fazx/jdzd?link=fazx&name=jdzd"
            },
            {
              name: "企业主导型智慧物业平台建设方案",
              goto: "/fazx/qyzd?link=fazx&name=qyzd"
            },
            {
              name: "智慧园区平台建设方案",
              goto: "/fazx/zhyq?link=fazx&name=zhyq"
            },
            {
              name: "数字乡村平台建设方案",
              goto: "/fazx/szxc?link=fazx&name=szxc"
            },
          ]
        },
        {
          name: "新闻动态",
          link: "/news/gsdt"
        },
        {
          name: "招商合作",
          link: "/team"
        },
        {
          name: "一诺万金",
          link: "/profile"
        }
      ]
    }
  },
  methods: {
    itemClick(index, path) {
      // 修改当前索引为点击索引
      this.currentIndex = index;
      // 页面跳转
      this.$router.push(path);
    },
    // 点击孩子阻止冒泡到父亲，传入event参数
    btnClick(path, event) {
      this.$router.push(path);
      // 调用stopBubble(event)
      this.stopBubble(event);
    },
    // 鼠标移入展示
    itemOver(index) {
      if(index === 1) {
        document.getElementsByClassName("nav-hover-box")[1].style.display = "block";
      }else if(index === 2) {
        document.getElementsByClassName("nav-hover-box")[2].style.display = "block";
      }
    },
    // 鼠标移出隐藏
    itemLeave(index) {
      document.getElementsByClassName("nav-hover-box")[index].style.display = "none";
    }
  },
}
</script>
<style>
  .nav {
    width: 62.5%;
    height: 64px;
    position: absolute;
    left: 0;
    right: 0;
    top: 40px;
    margin: 0 auto;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .nav .logo {
    margin-left: -4px;
  }

  /* 父盒子弹性布局 */
  .nav .nav-box {
    display: flex;
    margin-right: -16px;
  }

  /* 每一项子盒子 */
  .nav .nav-box .nav-item-box {
    margin-left: 24px;
  }

  /* 默认第一个被选中 */
  .nav .nav-box .active .nav-text span {
    font-weight: bolder;
    border-bottom: 2px solid #fff;
  }

  .nav .nav-box .nav-item-box .nav-text span {
    color: #fff;
    font-size: 16px;
    padding: 8px 4px;
  }

  /* hover-span */
  .nav .nav-box .nav-item-box .nav-text span:hover {
    font-weight: bolder;
    border-bottom: 2px solid #fff;
  }

  /* hover-box默认隐藏 */
  .nav .nav-box .nav-item-box .nav-hover-box {
    display: none;
    background-color: #fff;
    width: 520px;
    padding: 24px;
    position: absolute;
    top: 48px;
  }

  .nav .nav-box .product .nav-hover-box h2 {
    font-size: 16px;
    font-weight: 1000;
    color: #333;
    padding: 0 8px;
    border-left: 4px solid #f5222d;
  }

  .nav .nav-box .solution .nav-hover-box h2 {
    font-size: 16px;
    font-weight: 1000;
    color: #333;
    padding: 0 8px;
    border-left: 4px solid #1890ff;
  }

  .nav .nav-box .nav-item-box .nav-hover-box .nav-hover-text-box {
    display: flex;
    flex-wrap: wrap;
  }

  .nav .nav-box .nav-item-box .nav-hover-box .nav-hover-text-box a {
    font-size: 1.4rem;
    color: #666;
  }

  /* product展示 */
  .nav .nav-box .product .nav-hover-box .nav-hover-text-box .nav-hover-item {
    width: 33.33%;
    padding-top: 16px;
  }

  /* solution展示 */
  .nav .nav-box .solution .nav-hover-box .nav-hover-text-box .nav-hover-item {
    width: 50%;
    padding-top: 16px;
  }

  /* 移动端 */
  @media screen and (max-width: 375px) {
    .nav {
      display: none;
    }
  }

</style>